<template>
  <el-card class="box-card" style="margin:10px 0px">
    <!--头部-->
    <div slot="header" class="clearfix">
      <!--头部左侧内容-->
      <el-tabs class="tab" v-model="activeName">
        <el-tab-pane label="销售额" name="sale"></el-tab-pane>
        <el-tab-pane label="访问量" name="visit"></el-tab-pane>
      </el-tabs>
      <!--头部右侧内容-->
      <div class="right">
        <span @click="setToday">今日</span>
        <span @click="setWeek">本周</span>
        <span @click="setMonth">本月</span>
        <span @click="setYear">本年</span>
        <!--日期选择-->
        <el-date-picker
          v-model="date"
          class="date"
          size="mini"
          type="daterange"
          range-separator="-"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          value-format="yyyy-MM-dd"
        >
        </el-date-picker>
      </div>
    </div>
    <!--内容-->
    <div>
      <el-row :gutter="10">
        <!-- 中左-->
        <el-col :span="20">
          <!--图表容器-->
          <el-card class="box-card" shadow="never" style="border:none">
            <div class="charts" ref="charts"></div>
          </el-card>
        </el-col>
        <!-- 中右-->
        <el-col :span="4">
          <div >
              <h3>门店{{ title }}排名</h3>
              <ul>
                <li>
                  <span class="rindex">1</span>
                  <span>肯德基</span>
                  <span class="rvalue">12313</span>
                </li>
                <li>
                  <span class="rindex">2</span>
                  <span>肯德基</span>
                  <span class="rvalue">12313</span></li>
                <li>
                  <span class="rindex">3</span>
                  <span>肯德基</span>
                  <span class="rvalue">12313</span></li>
                <li>
                  <span class="rindex1">4</span>
                  <span>肯德基</span>
                  <span class="rvalue">12313</span></li>
                <li>
                  <span class="rindex1">5</span>
                  <span>肯德基</span>
                  <span class="rvalue">12313</span></li>
                <li>
                  <span class="rindex1">6</span>
                  <span>肯德基</span>
                  <span class="rvalue">12313</span></li>
                <li>
                  <span class="rindex1">7</span>
                  <span>肯德基</span>
                  <span class="rvalue">12313</span></li>
              </ul>
            </div>
        </el-col>
      </el-row>
    </div>
  </el-card>
</template>

<script>
import echarts from 'echarts'
import dayjs from 'dayjs'
export default {
  name: 'index',
  data() {
    return {
      activeName: 'sale',
      mycharts:null,
      date:[],//收集日期
    }
  },
  mounted() {
    //初始化echarts实例
    this.mycharts = echarts.init(this.$refs.charts)
    this.mycharts.setOption({
      title:{
        text:`销售额趋势`,
      },
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow'
        }
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
      },
      xAxis: [
        {
          type: 'category',
          data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月','八月','九月','十月','十一月','十二月'],
          axisTick: {
            alignWithLabel: true
          }
        }
      ],
      yAxis: [
        {
          type: 'value'
        }
      ],
      series: [
        {
          name: 'Direct',
          type: 'bar',
          barWidth: '40%',
          color:'yellowgreen',
          data: [150, 52, 200, 334, 390, 330, 220,213,521,241,223,523]
        }
      ]
    })
    //当浏览器发生resize事件的时候，让其触发echart的resize事件，重绘canvas
    window.addEventListener("resize", () => { this.mycharts.resize();});
  },
  computed:{
    title(){
      return this.activeName==='sale'?'销售额':'访问量'
    }
  },
  methods:{
    //今日
    setToday(){
      const day = dayjs().format('YYYY-MM-DD')
      this.date = [day,day]
    },
    //本周
    setWeek(){
      const day1 = dayjs().day(1).format('YYYY-MM-DD')
      const day2 = dayjs().day(7).format('YYYY-MM-DD')
      this.date = [day1,day2]
    },
    //本月
    setMonth(){
      const month = dayjs().startOf('month').format('YYYY-MM-DD')
      const month1 = dayjs().endOf('month').format('YYYY-MM-DD')
      this.date = [month,month1]
    },
    //今年
    setYear(){
      const year = dayjs().startOf('year').format('YYYY-MM-DD')
      const year1 = dayjs().endOf('year').format('YYYY-MM-DD')
      this.date = [year,year1]
    },
  },
  watch:{
    //当标题发生变化
    title(){
      //新数据覆盖旧数据 否则原数据不发生变化
      this.mycharts.setOption({
        title:{
          text:this.title+'趋势'
        }
      })
    }
  }
}
</script>

<style scoped>
.clearfix {
  display: flex;
  position: relative;
  justify-content: space-between;
}

.right {
  position: absolute;
  right: 0px;
}

.tab {
  width: 100%;
}

.date {
  width: 230px;
  margin: 0px 20px;
}

.right span {
  font-size: 14px;
  margin-left: 8px;
}

.charts {
  width: 100%;
  height: 300px;
}
ul{
  list-style: none;
  width: 100%;
  height: 300px;
  padding: 0;
}
ul li{
  height: 8%;
  margin:9px;
}
.rindex{
  margin-right: 15px;
  float:left;
  height: 18px;
  width:18px;
  border-radius: 50%;
  background: black;
  color: white;
  text-align: center;
}
.rindex1{
  margin-right: 15px;
  float:left;
  height: 18px;
  width:18px;
  border-radius: 50%;
  text-align: center;
}
.rvalue{
  float:right;
}
</style>
